/**
 * Created by quxiangqian on 2018/6/5.
 */
export  class ToolTip extends React.Component {
    state={
        isShow:false,
        x:0,
        y:0,
        left:0,
        top:0,
        pos:"left"
    }

    tooltipReact=(ints)=>{
       //ints.style.left=ints.width/2;
        if(!this.target){
            return;
        }
        let toolp=$(ints)
        let inner=toolp.find(".tooltip-inner");
        if(this.state.pos==="top"){
            toolp.find(".arrow").css("left",inner.width()/2)
            //toolp.css({tool})
            toolp.attr("class","tooltip bs-tooltip-top show");
            let tippos={
                left:this.target.offset().left-(inner.outerWidth())/2+this.target.outerWidth()/2,
                top:this.target.offset().top-(toolp.outerHeight())
            }
            toolp.css(tippos);
        }

        if(this.state.pos==="left"){
            toolp.find(".arrow").css("top",inner.height()/2)
            //toolp.css({tool})
            toolp.attr("class","tooltip bs-tooltip-left show");
            let tippos={
                left:this.target.offset().left-toolp.outerWidth(),
                top:this.target.offset().top+(this.target.outerHeight()-inner.outerHeight())/2
            }
            toolp.css(tippos);
        }
        if(this.state.pos==="right"){
            toolp.find(".arrow").css("top",inner.height()/2)
            //toolp.css({tool})
            toolp.attr("class","tooltip bs-tooltip-right show "+this.props.css);
            let tippos={
                left:this.target.offset().left+this.target.outerWidth(),
                top:this.target.offset().top+(this.target.outerHeight()-inner.outerHeight())/2
            }
            toolp.css(tippos);
        }
        if(this.state.pos==="bottom"){
            toolp.find(".arrow").css("left",inner.width()/2)
            //toolp.css({tool})
            toolp.attr("class","tooltip bs-tooltip-bottom show");
            let tippos={
                left:this.target.offset().left-(inner.outerWidth())/2+this.target.outerWidth()/2,
                top:this.target.offset().top+this.target.outerHeight()
            }
            toolp.css(tippos);
        }

    }
    tip=(props)=>{
        let layers= document.getElementById("layers")
        //if(this.state.isShow) {
           //console.log("显示")
        //style="will-change: transform; position: absolute; transform: translate3d(27px, 3626px, 0px); top: 0px; left: 0px;"
        let part=ReactDOM.createPortal(
            <div class={"tooltip bs-tooltip-top show"+this.props.css } ref={this.tooltipReact}  role="tooltip" style={{left:this.state.x,top:this.state.y}}  >
                <div class="arrow" ></div>
                <div class="tooltip-inner">
                {this.props.text}
                </div>
            </div>,layers)

          return (this.state.isShow?part:"");
      //  }
    }

    render(){
        //console.log(this.tip)
        let Tips=this.tip;
        return (React.Children.map(this.props.children,(child)=>{
            child.props.onMouseEnter=(e)=>{

                let target=$(e.currentTarget);
                this.target=target;
                this.state.isShow=true;
                let pos={
                    isShow:true,
                    pos:this.props.pos?this.props.pos:"top"
                }
                // if(target.offset().top>window.outerHeight/4*3){
                //     pos.pos="bottom"
                // }
                // if(target.offset().top<window.outerHeight/4*3){
                //     pos.pos="top"
                // }
                //
                // if(target.offset().left>window.outerWidth/4*3){
                //     pos.pos="right"
                // }
                // if(target.offset().left<window.outerWidth/4*3){
                //     pos.pos="left"
                // }
                // console.log(pos.pos);

                this.setState(pos)
            }
            child.props.onMouseLeave=(e)=>{

                this.setState({isShow:false});
            }
            return [child,<Tips></Tips>];
        }));

    }
}